<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Stores</title>

    <!--<link href="https://fonts.googleapis.com/css?family=PT+Serif|Open+Sans" rel="stylesheet">-->
    <!--<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
    <link href="styles/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="scss/utils/Main.css">
    <link rel="stylesheet" href="scss/utils/Admin.css">

</head>
<body class="has-admin-nav has-admin-aside has-admin-footer">
<main role="main">
    <section class="admin-navbar">
        <div class="container">
            <ul class="nav nav-pills" role="tablist">
                <li role="presentation"><a href="AdminIndex.html">Campaigns</a></li>
                <li role="presentation"><a href="AdminStats.html">Stats</a></li>
                <li role="presentation" class="active"><a href="AdminStores.html">Stores</a></li>
                <li role="presentation"><a href="AdminProfits.html">Profits</a></li>
                <li role="presentation"><a href="AdminSettings.html">Settings</a></li>
                <li role="presentation"><a href="AdminSubaccounts.html">Subaccounts</a></li>
                <li role="presentation"><a href="AdminCoupons.html">Coupons</a></li>
            </ul>
        </div>
    </section>

    <section class="admin-content admin-content-header">
        <div class="container">
           <div class="box">
               <h2 class="PTSerif">Stores</h2>
               <!--<h3>Figures based on June 13, 2017 at 10:33 AM GMT+08:00</h3>-->
               <div class="content-header-aside"><a href="#" class="color-pink font-rem-1-6" data-toggle="modal" data-target=".admin-modal-add" data-backdrop="static"><u>+ Add Store</u></a></div>
           </div>
        </div>
    </section>

    <section class="admin-content">
        <div class="container">
            <div class="box section-h3">Total: <strong>2</strong></div>
        </div>
    </section>

    <section class="admin-content section-table">
        <div class="container">
            <div class="box">
                <!--No campaigns found 没有结果时显示的内容-->
                <!--<div class="font-rem-2-4 text-center no_found">No campaigns found</div>-->
                <div class="table-wrapper table-responsive">
                    <table class="table" id="table">

                    </table>
                </div>
            </div>
        </div>
    </section>

</main>
<div class="modal fade admin-modal-add" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close btn-clean" data-dismiss="modal" aria-label="Close"><i class="fa fa-times font-rem-1-8"  aria-hidden="true"></i></button>
                <h4 class="modal-title PTSerif">Add Store</h4>
            </div>
            <div class="modal-body modal-body-padding">
                <form action="" class="form-radius form_add_store" id="form_add">
                    <div class="form-group">
                        <div class="row">
                            <label class="col-sm-4 control-label">Title</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="title" placeholder="Title">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <label class="col-sm-4 control-label">Description</label>
                            <div class="col-sm-8">
                                <textarea name="description" class="form-control" rows="4" placeholder="Description"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <label class="col-sm-4 control-label">URL</label>
                            <div class="col-sm-8">
                                <div class="has-addon">
                                    <span class="input-group-addon url-input-group-addon">https://teechip.com/</span>
                                    <input type="text" class="form-control" name="url" style="text-indent: 8.8em;">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <label class="col-sm-4 control-label">Campaigns</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="campaigns" placeholder="Search by URL">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <label class="col-sm-4 control-label">Banner</label>
                            <div class="col-sm-8">
                                <div id="add_banner" class="files">
                                    <div id="template-1" class="file-row row">
                                        <div class="col-lg-3"><div class="dz-image"><img data-dz-thumbnail /></div></div>
                                        <div class="col-lg-3">
                                            <p class="name" data-dz-name></p>
                                            <strong class="error text-danger" data-dz-errormessage></strong>
                                        </div>

                                        <div class="col-lg-3">
                                            <p class="size" data-dz-size></p>
                                        </div>
                                        <div class="col-lg-3 control-bar">
                                            <button class="btn btn-primary start" type="button" title="Start">
                                                <i class="fa fa-upload"></i>
                                            </button>
                                            <button data-dz-remove class="btn btn-warning cancel" type="button" title="Cancel">
                                                <i class="fa fa-ban"></i>
                                            </button>
                                            <button data-dz-remove class="btn btn-danger delete" type="button" title="Delete" style="display: none;">
                                                <i class="fa fa-trash-o"></i>
                                            </button>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                                                <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div><button type="button" class="btn font-rem-1-8 add_banner_fileinput_button fileinput_button"><i class="fa fa-plus"></i> Upload Files</button></div>
                                <div class="note">Image must be a JPG or PNG file no larger than 5MB. Recommended dimensions:1080 pixels(width) by 230 pixels(height).</div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <label class="sr-only">Private</label>
                            <div class="col-sm-8 col-sm-offset-4 controls">
                                <span class="bootstrap-switch" tabindex="0" >
                                    <input type="checkbox" data-control-mode="switch" class="ignore_validate"/>
                                    <input type="hidden" name="_private">
                                </span>
                                <span class="font-rem-1-8"> Private</span>
                                <div class="note">Private stores do not show up in search engine results.</div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <label class="sr-only">Active</label>
                            <div class="col-sm-8 col-sm-offset-4 controls">
                                <span class="bootstrap-switch" tabindex="0" >
                                    <input type="checkbox" data-control-mode="switch" class="ignore_validate"/>
                                    <input type="hidden" name="active">
                                </span>
                                <span class="font-rem-1-8"> Active</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <label class="sr-only">Hide title/description</label>
                            <div class="col-sm-8 col-sm-offset-4 controls">
                                <span class="bootstrap-switch" tabindex="0" >
                                    <input type="checkbox" data-control-mode="switch" class="ignore_validate"/>
                                    <input type="hidden" name="hide">
                                </span>
                                <span class="font-rem-1-8"> Hide title/description</span>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-8 col-sm-offset-4">
                            <button type="submit" class="control-btn btn btn-fill-primary PTSerif btn-animate-fade" style="margin-top:30px ;margin-bottom:30px;">Save</button>
                        </div>
                    </div>
                </form>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade admin-modal-edit" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close btn-clean" data-dismiss="modal" aria-label="Close"><i class="fa fa-times font-rem-1-8"  aria-hidden="true"></i></button>
                <h4 class="modal-title PTSerif">Edit Store</h4>
            </div>
            <div class="modal-body modal-body-padding">
                <form action="" class="form-radius form_add_store" id="form_edit">
                    <div class="form-group">
                        <div class="row">
                            <label class="col-sm-4 control-label">Title</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="title" placeholder="Title">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <label class="col-sm-4 control-label">Description</label>
                            <div class="col-sm-8">
                                <textarea name="description" class="form-control" rows="4" placeholder="Description"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <label class="col-sm-4 control-label">URL</label>
                            <div class="col-sm-8">
                                <div class="has-addon">
                                    <span class="input-group-addon url-input-group-addon">https://teechip.com/</span>
                                    <input type="text" class="form-control" name="url" style="text-indent: 8.8em;">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <label class="col-sm-4 control-label">Campaigns</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="campaigns" placeholder="Search by URL">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <label class="col-sm-4 control-label">Banner</label>
                            <div class="col-sm-8">
                                <div id="edit_banner" class="files">

                                </div>
                                <div><button type="button" class="btn font-rem-1-8 add_banner_fileinput_button fileinput_button"><i class="fa fa-plus"></i> Upload Files</button></div>
                                <div class="note">Image must be a JPG or PNG file no larger than 5MB. Recommended dimensions:1080 pixels(width) by 230 pixels(height).</div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <label class="sr-only">Private</label>
                            <div class="col-sm-8 col-sm-offset-4 controls">
                                <span class="bootstrap-switch" tabindex="0" >
                                    <input type="checkbox" data-control-mode="switch" class="ignore_validate"/>
                                    <input type="hidden" name="_private">
                                </span>
                                <span class="font-rem-1-8"> Private</span>
                                <div class="note">Private stores do not show up in search engine results.</div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <label class="sr-only">Active</label>
                            <div class="col-sm-8 col-sm-offset-4 controls">
                                <span class="bootstrap-switch" tabindex="0" >
                                    <input type="checkbox" data-control-mode="switch" class="ignore_validate"/>
                                    <input type="hidden" name="active">
                                </span>
                                <span class="font-rem-1-8"> Active</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <label class="sr-only">Hide title/description</label>
                            <div class="col-sm-8 col-sm-offset-4 controls">
                                <span class="bootstrap-switch" tabindex="0" >
                                    <input type="checkbox" data-control-mode="switch" class="ignore_validate"/>
                                    <input type="hidden" name="hide">
                                </span>
                                <span class="font-rem-1-8"> Hide title/description</span>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-8 col-sm-offset-4">
                            <button type="submit" class="control-btn btn btn-fill-primary PTSerif btn-animate-fade" style="margin-top:30px ;margin-bottom:30px;">Save</button>
                        </div>
                    </div>
                </form>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="lib/jquery.1.12.4.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/dropzone.min.js"></script>
<script src="lib/jquery.validate.min.js"></script>
<script src="lib/bootstrap-table.min.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/dz-custom.js"></script>
<script>
    $(function($){

        $(".admin-modal-add")
            .on("show.bs.modal",function(){
                setSwitchFalse();
                add_banner = new createCustDropzone({selector:'#add_banner',preview:"#add_banner",template:add_template_template,clickable:".add_banner_fileinput_button"});
            })
            .on("shown.bs.modal",function(){
                validatorForm({
                    container:this,
                    rules:{
                        title:{
                            required:true
                        },
                        description:{
                            required:true
                        },
                        url:{
                            required:true
                        },
                        campaigns:{
                            required:true
                        },
                        banner:{
                            required:true
                        }
                    },
                    callback:function(params){
                        console.log(params);
                        validator.resetForm();
                    }
                });
            })
            .on("hide.bs.modal",function(){
                resetFormValidate.call(this);
                if(add_banner!==null){
                    add_banner.destroyDropzone();
                }
            });

        //modal edit
        $(".admin-modal-edit")
            .on("show.bs.modal",function(){
                $.get("json/AdminStores-1.json",function(result){
                    var $form = $("#form_edit");
                    for(var name in result){
                        switch (name){
                            case "_private":
                            case "active":
                            case "hide":
                                var $input = $form.find("[name="+name+"]");
                                $input.parents(".controls").find("[data-control-mode=switch]").setSwitch(result[name]);
                                $input.val(result[name]);
                                break;
                            default:
                                $form.find("[name="+name+"]").val(result[name]);
                                break;
                        }
                    }

                });
                $.get("json/AdminStores-banner.json",function(result){
                    edit_banner = new createCustDropzone({selector:'#edit_banner',preview:"#edit_banner",template:add_template_template,clickable:".fileinput_button"});
                    edit_banner.loadDzTemp({data:result});
                });
            })
            .on("shown.bs.modal",function(){

//
                validatorForm({
                    container:this,
                    rules:{
                        title:{
                            required:true
                        },
                        description:{
                            required:true
                        },
                        url:{
                            required:true
                        },
                        campaigns:{
                            required:true
                        }
                    },
                    callback:function(params){
                        console.log(params);
                        validator.resetForm();
                    }
                })
            })
            .on("hide.bs.modal",function(){
                resetFormValidate.call(this);
                if(edit_banner!==null){
                    edit_banner.destroyDropzone();
                }
            });

        $("#table").bootstrapTable({
            url:"json/AdminStores.json",
            cache:false,
            columns:[{
                field:"title",
                title:"Title"
            },{
                field:"url",
                title:"URL"
            },{
                field:"private",
                title:"Private",
                formatter:IconBoolFormatter
            },{
                field:"status",
                title:"Status",
                formatter:ableBoolFormatter
            },{
                title:"",
                formatter:editFormatter
            }]
        })
    })
</script>
</body>
</html>